<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            transition: all .5s linear;
        }
        img:nth-of-type(1):hover{
            transform: rotateX(30deg);
            transform: rotateY(30deg);
            transform: rotate(30deg);
            transform: rotate(-30deg);
        }
        img:nth-of-type(2):hover{
            transform: skew(30deg, 30deg);  
            transform: skew(30deg);
            transform: skew(-30deg);
            transform: skew(-270deg);
        }
        img:nth-of-type(3):hover{
            transform: scale(1);
            transform: scale(0);
            transform: scale(-1);
        }
        img:nth-of-type(4):hover{
            transform: translate(-30px, 30px);
            transform: translate(50px, 50px);
            transform: translate(-50px, -50px);
            transform: translate(50px, -50px);
        }
        #box{
            width: 100px;
            height: 100px;
            border: 5px solid yellow;
            margin: 200px auto;
            transition: all .5s;
        }
        #box:hover{
            box-shadow: 10px 20px 20px gray;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <!-- 
        1. 变形
            transform:none          不变形,默认
                      rotate        旋转
                      skew          扭曲  (90*基数 就扭曲到小时)
                      scale         中心缩放    1:本身大小
                                               >1:放大
                                               <1:缩小(可以为负数)
                      translate     位移  (基于自身开始位移)
     -->
    <img src="../resource/10.jpg" width="200">
    <img src="../resource/11.jpg" width="200">
    <img src="../resource/12.jpg" width="200">
    <img src="../resource/13.jpg" width="200">
    <div id="box"></div>

</body>
</html>